<template>
    <div>
        <!-- 头部右侧充值，登录end--->
        <!-- 登录弹窗 -->
        <el-dialog v-model="dialogVisible" :close-on-press-escape="false" :close-on-click-modal="false" append-to-body
            align-center modal-class="overlay-modal" style="border-radius: 16px !important" width="500">
            <div class="login three-login clearfix">
                <div class="normal">
                    <div class="login-style-contant normal-login">
                        <div class="tab-normal-mode clearfix">
                            <a class="active">手机号登录</a>
                            <!-- <a>用户注册</a> -->
                        </div>
                        <div class="login-from" data-login-switch="normal">
                            <!-- 国际区号 -->
                            <label for="">
                                <div class="intl-tel-input allow-dropdown separate-dial-code iti-sdc-3">
                                    <input type="tel" class="area-code monitor-input1" v-model="ruleForm.mobile"
                                        placeholder="请输入手机号" maxlength="40" autocomplete="off" />
                                </div>
                            </label>
                            <!-- 用户密码 -->
                            <label for="" class="login-password" v-if="ruleForm.passwordShow">
                                <input type="password" id="password" class="monitor-input2" v-model="ruleForm.password"
                                    placeholder="请输入您的密码" maxlength="20" autocomplete="off" />
                            </label>
                            <!-- 验证码 -->
                            <label for="" class="login-yzm" v-if="!ruleForm.passwordShow">
                                <input type="text" name="" class="monitor-input3" v-model="ruleForm.code"
                                    placeholder="请输入您的验证码" maxlength="6" autocomplete="off" />
                                <div id="sendYzm" @click="getSendCode">
                                    <span>{{ btnText }}</span>
                                </div>
                            </label>
                        </div>
                        <div class="login-btn">
                            <a @click="submitForm">登录</a>
                            <a class="gotoCellphone" v-if="!ruleForm.passwordShow" @click="loginSelect">密码登录</a>
                            <a class="gotoCellphone" v-if="ruleForm.passwordShow && siteConf.ad.sms_open"
                                @click="loginSelect">验证码登录</a>
                        </div>
                        <div class="new-wx-qqphone" v-if="siteConf.ad.qq_open">
                            <p>
                                <a @click="qqLogin" class="style-contant-qq qqa"></a>
                                <b>QQ登录/注册</b>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer login-style-text">
                    注册和登录即视为您已阅读并同意
                    <a href="#" rel="nofollow" target="_blank">《KM网用户注册协议》</a>
                </div>
            </template>
        </el-dialog>
        <!-- 登录弹窗 end -->
        <!-- vip充值弹窗 -->
        <el-dialog class="vip-dialog" v-model="vipDialogVisible" :close-on-press-escape="false" width="950"
            :close-on-click-modal="false" append-to-body align-center modal-class="overlay-modal"
            style="border-radius: 16px !important; background: none" @close="vipCloseDialog">
            <div class="new-vip-index">
                <div class="vip-hd" :class="vipSwitch !== 0 ? 'super-vip-active ' : ''">
                    <!-- super-vip-active -->
                    <div class="hd-left">
                        <img class="user-img" :src="userInfo.avatar" />
                        <div class="user-info">
                            <div class="user-name">{{ userInfo.username || "" }}</div>
                            <div class="user-id">ID: {{ userInfo.label_id || "" }}</div>
                        </div>
                    </div>
                    <ul class="new-vip-tabs">
                        <li class="new-vip-tab" v-for="(item, index) in userConfig.vipClass" :key="index"
                            :class="vipSwitch == index ? 'active' : ''" @click="switchVipClick(index)">
                            {{ item.title }}
                        </li>
                    </ul>
                </div>
                <div class="vip-bd">
                    <div class="bd-left-adv">
                        <!-- 素材广告位 -->
                        <img class="material-left-adv" :src="userConfig.vipClass[vipSwitch].full_url"
                            :style="vipSwitch == 0 ? 'display: block;' : 'display: none;'" />
                        <!-- 全站vip广告位 -->
                        <img class="whole-left-adv" :src="userConfig.vipClass[vipSwitch].full_url"
                            :style="vipSwitch !== 0 ? 'display: block;' : 'display: none;'" />
                    </div>
                    <div class="bd-right material-website" style="display: block">
                        <ul class="vip-type-tabs">
                            <li class="vip-type-tab" v-for="(v, i) in userConfig.vipClass[vipSwitch]['price']" :key="i"
                                :class="vipMoneySwitch == i ? 'active' : ''" @click="selectVipMoeny(v, i)">
                                <h3>{{ v.title || "" }}</h3>
                                <div class="new-vip-price">
                                    <span class="unit">¥</span><span class="price">{{ v.price || 0 }}</span>
                                </div>
                                <div class="pay-give">低至{{ v.min_price || 0 }}元/天</div>
                            </li>
                        </ul>
                        <div class="additional-package" style="background: #ffffff !important">
                            <!-- <h3>折扣加购</h3>
                            <div class="package-content active">
                                <div class="package-left">
                                    <i class="radio active"></i>
                                    <span class="package-name">1000下载币 + 3张素材打折券 （立省52元起）</span>
                                </div>
                                <div class="package-price">Ks100</div>
                            </div> -->
                        </div>
                        <div class="pay-type-content">
                            <div class="pay-type-box" style="align-items: center; height: 200px">
                                <ul class="pay-type-list">
                                    <li class="pay-type-item" v-for="(type, typeindex) in userConfig.payType"
                                        :key="typeindex" v-show="type.name !== 'blance'"
                                        :class="isActivePay == type.id ? 'active' : ''" @click="payClick(type)">
                                        <div>
                                            <i class="pay-icon"
                                                :class="type.name == 'wxpay' ? 'wx-icon' : 'zfb-icon'"></i>
                                        </div>
                                        {{ type.title }}
                                    </li>
                                </ul>
                                <div class="pay-price-content">
                                    <div class="pay-price-left" style="display: block; border: 1px solid #ffdfba">
                                        <div class="qrcode">
                                            <img style="width: 114px; height: 114px" :src="payArr" />
                                        </div>
                                        <div class="pay-loadding" v-if="isLoading">
                                            <span></span><em>正在加载...</em>
                                        </div>
                                        <div class="expire-pay" v-if="isRefresh" @click="refreshPay">
                                            <i></i><span>二维码已超时<br />请刷新</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="pay-price-right">
                                    <div class="pay-price-info">
                                        <span class="pay-price-name">实付：</span>
                                        <span class="pay-price-num"><span class="unit">¥</span><span class="price">{{
                                            userConfig.vipClass[vipSwitch]["price"][vipMoneySwitch]
                                                .price || 0
                                        }}</span></span>
                                    </div>
                                    <div class="pay-text">使用微信/支付宝扫码支付</div>
                                    <div class="pay-text">支付则默认同意《用户协议》</div>
                                </div>
                                <!-- <div class="pay-price-right">
                                    <div class="pay-price-info">
                                        <span class="pay-price-name">实付：</span>
                                        <span class="pay-price-num"><span class="price">980</span><span
                                                class="unit">下载币</span>
                                            <i class="pay-tips">
                                                <div class="tip">“使用下载币支付VIP将无法开具发票”</div>
                                            </i></span>
                                    </div>
                                    <div class="pay-text pay-btn disabled">余额不足</div> 
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- vip充值弹窗end -->
        <!-- 充值币弹窗 -->
        <el-dialog class="notice-dialog" v-model="coinDialogVisible" :close-on-press-escape="false" width="848"
            append-to-body align-center modal-class="overlay-modal" @close="closeDialog" :z-index="100000000"
            :close-on-click-modal="false" style="border-radius: 16px !important; padding: 0 !important">
            <div class="ant-modal-content">
                <div class="ant-modal-body">
                    <div class="styleGroup__XywHy">
                        <div class="top__zAG7q">
                            <div class="header">
                                <div class="icon_url">
                                    <img :src="userInfo.avatar" />
                                </div>
                                <div class="info">
                                    <div class="info_name">
                                        {{ userInfo.label_id }}
                                    </div>
                                    <div class="info_name_tip">
                                        <span>(余额:
                                            {{
                                                userInfo.money
                                            }}知币)&nbsp;&nbsp;充值越多，优惠越多</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="recharge">
                            <div class="title">全新升级 多充多享</div>
                            <div class="iconLeft" :style="currentIndex === 0 ? 'display: none;' : 'display: block;'
                                " @click="prevItem">
                                <div>
                                    <img src="https://cdn.code.znzmo.com/sucai/img/images/classifyLeftIcon.png"
                                        alt="" />
                                </div>
                            </div>
                            <div class="lastBox" :style="{
                                transform: `translateX(-${currentIndex * itemWidth}px)`,
                            }">
                                <div class="noFirstMeal" :class="_mealActive == index ? '_mealActive' : ''"
                                    v-for="(item, index) in userConfig.coinType" :key="index"
                                    @click="coinClick(item, index)">
                                    <div class="jb">{{ item.coin || 0 }}KM币</div>
                                    <div class="jbprice">
                                        ¥ <span> {{ item.price || 0 }}</span>
                                    </div>
                                    <div class="tips1" v-if="item.is_discount == 1">
                                        减<span>¥{{ item.discount_price || 0 }}</span>
                                    </div>
                                    <div v-if="item.give_score > 0">
                                        <div class="tips2">
                                            可获赠<span>{{ item.give_score || 0 }}</span>积分
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="iconRight" @click="nextItem" :style="currentIndex === userConfig.coinType.length - 1
                                ? 'display: none;'
                                : 'display: block;'
                                ">
                                <div>
                                    <img src="https://cdn.code.znzmo.com/sucai/img/images/classifyRightIcon.png"
                                        alt="" />
                                </div>
                            </div>
                            <!-- <el-button style="z-index: 100000000000000000;" @click="prevItem" :disabled="currentIndex === 0">Previous</el-button>  
                            <el-button @click="nextItem" :disabled="currentIndex === userConfig.coinType.length - 1">Next</el-button>  -->
                            <div class="payInfoArea">
                                <div class="payPrice__psydn">
                                    <span>实付</span><span>¥</span><span>{{
                                        userConfig.coinType[_mealActive].price -
                                        userConfig.coinType[_mealActive].discount_price || 0
                                    }}</span>
                                </div>
                                <div :class="userConfig.coinType[_mealActive].is_discount === 1
                                    ? 'youhuiPrice'
                                    : 'youhuiPrices'
                                    ">
                                    <span>已优惠{{
                                        userConfig.coinType[_mealActive].discount_price || 0
                                    }}</span>
                                </div>
                                <!-- <div class="vouchersDiv">
                                    <span class="youhui__AcF6M">代金券</span>
                                    <div class="ant-select rechargeNewSelect">
                                        <div class="select-selection-item">满40元，可减5元</div>
                                    </div>
                                </div> -->
                                <div class="brdashed__vIicU"></div>
                                <div class="payImg">
                                    <img :src="payArr" />
                                    <div class="icon-pay-loadding" v-if="isLoading">
                                        <span></span><em>正在加载...</em>
                                    </div>
                                    <div class="icon-expire-pay" v-if="isRefresh" @click="refreshPay">
                                        <i></i><span>二维码已超时<br />请刷新</span>
                                    </div>
                                </div>

                                <div class="payType">
                                    <el-space wrap>
                                        <div v-for="(type, typeindex) in userConfig.payType" :key="typeindex"
                                            @click.stop="selectCoinPayClick(type)">
                                            <div class="paydiv" :class="selectCoinPay == type.id ? 'paydivactive' : ''"
                                                v-if="type.name !== 'blance'">
                                                <div style="margin-right: 4px">
                                                    <i class="pay-icons" :class="type.name == 'wxpay' ? 'wx-icons' : 'zfb-icons'
                                                        "></i>
                                                </div>
                                                {{ type.title }}
                                            </div>
                                        </div>
                                    </el-space>
                                </div>
                                <div class="advice__Afagd">支付则默认同意《KM用户协议》</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 充值币弹窗end -->
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, nextTick, onUnmounted } from "vue";
import { ElMessage, ElLoading } from "element-plus";
import { doLogin, sendMobileCode, qqDoLogin } from "../api/home/index";
import { useUserInfo } from "../stores/userInfo";
import { useUserConfig } from "../stores/userConfig";
import { useSiteConfig } from '../stores/siteConfig'
import { checkPay, createOrder, doPayment } from "../api/pay";
import eventBus from "../utils/event-bus";

const isRefresh = ref(false);
const isLoading = ref(true);
const dialogVisible = ref(false); //登录弹窗
const vipDialogVisible = ref(false); //vip弹窗
const userInfo = useUserInfo(); //获取用户信息
const userConfig = useUserConfig(); //获取用户信息
const siteConf = useSiteConfig()
const vipSwitch = ref(0);
const vipMoneySwitch = ref(0);
const coinDialogVisible = ref(false); //充值金币弹窗
const currentIndex = ref(0);
const itemWidth = ref(170);
interface RuleForm {
    mobile: string;
    password: string;
    code: string;
    passwordShow: boolean;
}
const _mealActive = ref(0);

//下一个
const nextItem = () => {
    if (currentIndex.value < userConfig.coinType.length - 1) {
        currentIndex.value++;
    }
};
//上一个
const prevItem = () => {
    if (currentIndex.value > 0) {
        currentIndex.value--;
    }
};


//VIP类型切换
const switchVipClick = (id: number) => {
    stopPolling();
    vipMoneySwitch.value = 0;
    vipSwitch.value = id;
    createOrderData.remark = id == 0 ? "普通VIP" : "全站VIP";
    createOrderData.pay_price = userConfig.vipClass[vipSwitch.value]["price"][vipMoneySwitch.value]["price"] ?? 0,
        createOrderData.vip_price_id = userConfig.vipClass[vipSwitch.value]["price"][vipMoneySwitch.value]["id"],
        createOrderData.vip_type = vipSwitch.value == 0 ? 1 : 2,
        createOrderInfo(createOrderData);
};
interface orderItemForm {
    pay_price: number;
    vip_price_id: number;
    recharge_coin_id: number;
    pay_type: number;
    recharge_type: number;
    vip_type: number;
    remark: string;
}
//支付切换
const isActivePay = ref(1);
const payClick = (item: any) => {
    //停止轮询上个的
    stopPolling();
    isActivePay.value = item.id;
    createOrderData.pay_type = item.id;
    //触发订单
    createOrderInfo(createOrderData);
};

//金币支付按钮切换
const selectCoinPay = ref(1);
const selectCoinPayClick = (item: any) => {
    //获取金币的订单信息
    createOrderData.pay_price = userConfig.coinType[_mealActive.value].price
    createOrderData.recharge_coin_id = userConfig.coinType[_mealActive.value].id
    createOrderData.vip_price_id = 0
    createOrderData.pay_type = item.id
    createOrderData.recharge_type = 2
    createOrderData.vip_type = 0
    createOrderData.remark = "金币充值"
    selectCoinPay.value = item.id;
    createOrderInfo(createOrderData);
};
//金币数据切换
const coinClick = (item: any, index: number) => {
    _mealActive.value = index;
    createOrderData.pay_price = userConfig.coinType[_mealActive.value].price
    createOrderData.recharge_coin_id = userConfig.coinType[_mealActive.value].id
    createOrderData.vip_price_id = 0
    createOrderData.recharge_type = 2
    createOrderData.remark = "金币充值"
    createOrderInfo(createOrderData);
};

// 监听事件 -- 金币//金币
const coinHandleEvent = (data: any) => {
    _mealActive.value = 0;
    createOrderData.pay_price = userConfig.coinType[_mealActive.value].price
    createOrderData.vip_price_id = 0
    createOrderData.recharge_type = 2
    createOrderData.recharge_coin_id = userConfig.coinType[_mealActive.value].id
    createOrderData.remark = "金币充值"
    createOrderInfo(createOrderData);
    coinDialogVisible.value = data;
};
//金币 打开弹窗
eventBus.on("openJbCustomEvent", (res: any) => {
    //执行监听
    coinHandleEvent(res.dis)
});


//订单信息初始化
const createOrderData = reactive<orderItemForm>({
    pay_price: userConfig.vipClass.length > 0 ? userConfig.vipClass[vipSwitch.value]["price"][vipMoneySwitch.value]["price"] : 0,
    vip_price_id: userConfig.vipClass.length > 0 ? userConfig.vipClass[vipSwitch.value]["price"][vipMoneySwitch.value]["id"] : 0,
    recharge_coin_id: 0,
    pay_type: isActivePay.value, //支付类型
    recharge_type: 1,
    vip_type: vipSwitch.value == 0 ? 1 : 2,
    remark: vipSwitch.value == 0 ? "普通VIP" : "全站VIP",
});

//选择vip金额切换
const selectVipMoeny = (item: any, id: number) => {
    stopPolling();
    createOrderData.pay_price = item.price;
    createOrderData.vip_price_id = item.id;
    vipMoneySwitch.value = id;
    createOrderInfo(createOrderData);

};

//表单
const ruleForm = reactive<RuleForm>({
    mobile: "",
    password: "",
    code: "",
    passwordShow: true,
});
const code = ref("");

//登录切换
const loginSelect = () => {
    ruleForm.password = "";
    ruleForm.code = "";
    ruleForm.passwordShow = !ruleForm.passwordShow;
};

const payArr = ref('');
//支付
const paymentFun = () => {
    isLoading.value = true;
    doPayment({ order_sn: order_no.value, tab: createOrderData.pay_type })
        .then((res: any) => {
            if (res.code == 1) {
                payArr.value = res.data;
                isLoading.value = false;
                startPolling(); //轮询
            }
        })
        .catch((error) => {
            ElMessage.error("其他错误");
        });
};
//刷新二维码
const refreshPay = () => {
    isRefresh.value = false;
    createOrderInfo(createOrderData);

};
const totalTime = 60; // 倒计时时间
const countingDown = ref(false); // 倒计时状态
// 倒计时剩余时间
const remainingTime = reactive({
    seconds: totalTime,
});
// 计时器变量
let timer: NodeJS.Timeout | null = null;
// 倒计时
const startCountingDown = () => {
    if (!countingDown.value) {
        countingDown.value = true;
        remainingTime.seconds = totalTime;
    }
    timer = setInterval(() => {
        if (remainingTime.seconds > 0) {
            remainingTime.seconds--;
        } else {
            stopCountingDown();
        }
    }, 1000);
};

// 倒计时停止
const stopCountingDown = () => {
    if (timer) {
        clearInterval(timer);
        timer = null;
        countingDown.value = false;
    }
};

// 按钮文字切换
const btnText = computed(() =>
    countingDown.value ? remainingTime.seconds + "秒后重发" : "获取验证码"
);
//获取验证码
const getSendCode = () => {
    ruleForm.code = ""; //设置空
    if (ruleForm.mobile === "") {
        return ElMessage.error("手机号不能为空");
    }
    try {
        sendMobileCode({ mobile: ruleForm.mobile, status: 1 }).then((res: any) => {
            if (res.code == 1) {
                startCountingDown();
                code.value = res.data.list;
            } else {
                ElMessage.error(res.msg);
            }
        });
    } catch {
        ElMessage.error("验证码发送失败");
    }
};
//登录事件
const submitForm = () => {
    const loading = ElLoading.service({
        lock: true,
        text: '请稍等,正在登录中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    doLogin({
        username: ruleForm.mobile,
        password: ruleForm.password,
        code: ruleForm.code,
        passwordShow: ruleForm.passwordShow,
    })
        .then((res: any) => {
            if (res.code == 1) {
                userInfo.dataFill(res.data.userInfo); //用户信息
                userConfig.setVipClass(res.data.vipClass); //vip信息
                userConfig.setPayType(res.data.payType); //支付方式
                userConfig.setCoinType(res.data.coinType); //金币
                dialogVisible.value = false;

            }
        })
        .catch((error) => {
            if (error.code === 0) {
                ElMessage.error(error.msg);
            } else if (error.code === "ERR_CANCELED") {
                ElMessage.error("请求错误");
            } else {
                ElMessage.error("未知错误");
            }
        }).finally(() => {
            loading.close()
        });
};
//创建订单
const order_no = ref("");
const createOrderInfo = (createOrderData: any) => {
    createOrder({ createOrderData: createOrderData })
        .then((res: any) => {
            if (res.code == 1) {
                order_no.value = res.data.order_no;
                paymentFun();
            }
        })
        .catch((error: any) => {
            console.log(error);
        });
};
//监听头部组件给的弹出指令
eventBus.on("customEvent", (res: any) => {
    dialogVisible.value = res.dis;
});

//vip弹窗监听
const vipHandleEvent = (data: any) => {
    vipSwitch.value = 0;
    vipMoneySwitch.value = 0;
    createOrderData.pay_price = userConfig.vipClass[vipSwitch.value]["price"][vipMoneySwitch.value][
        "price"
    ],
    createOrderData.vip_price_id = userConfig.vipClass[vipSwitch.value]["price"][vipMoneySwitch.value]["id"],
    createOrderData.recharge_coin_id = 0
    //执行轮询 查询支付状态
    createOrderData.vip_type = vipSwitch.value == 0 ? 1 : 2;
    createOrderData.remark = vipSwitch.value == 0 ? "普通VIP" : "全站VIP";
    createOrderInfo(createOrderData);

    vipDialogVisible.value = data
}
//vip 打开弹窗
eventBus.on("openVipCustomEvent", (res: any) => {
    vipHandleEvent(res.dis);
});

//检查订单是否支付
const check_pay = async () => {
    try {
        // 获取下载的url  
        const res: any = await checkPay({ order_no: order_no.value });
        if (res.code === 1) {
            await userInfo.fetchUserInfo();
            if(vipDialogVisible.value){
                vipDialogVisible.value = false;
            }
            if(coinDialogVisible.value){
                coinDialogVisible.value = false;
            }
            //停止轮询
            stopPolling();

        }
    } catch (error: any) {
        if (error.code == 203) {
            isRefresh.value = true;
            //停止轮询
            stopPolling();
        }
    }
}

//轮询
const intervalId = ref<number | null>(null);
const startPolling = () => {
    if (intervalId.value !== null) return;
    intervalId.value = window.setInterval(check_pay, 3000); // 每1秒轮询一次
};

//停止轮询
const stopPolling = () => {
    if (intervalId.value !== null) {
        window.clearInterval(intervalId.value);
        intervalId.value = null;
    }
};


//关闭弹窗 -- 金币
const closeDialog = () => {
    stopPolling();
    eventBus.off('openJbCustomEvent', coinHandleEvent);
    coinDialogVisible.value = false;
};
//vip关闭弹窗
const vipCloseDialog = () => {
    stopPolling();
    eventBus.off('openVipCustomEvent', vipHandleEvent);
    vipDialogVisible.value = false;
};

//qq登录
const qqLogin = () => {
    qqDoLogin().then((res: any) => {
        if (res.code == 1) {
            window.location.href = res.data.routePath;
        }
    });
};
// 在组件卸载时移除监听器  
onUnmounted(() => {
    eventBus.off('openVipCustomEvent', vipHandleEvent);
    eventBus.off('openJbCustomEvent', coinHandleEvent);
}); 
</script>
<style>
@import url("@/style/dlogin.css");

.icon-pay-loadding {
    width: 158px;
    height: 158px;
    position: absolute;
    left: 47px;
    bottom: 107px;
    border-radius: 12px;
    background-color: #efefef;
    padding-top: 35px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.icon-pay-loadding span {
    background: url(https://static.3d66.com/act/images/global-act-pay/loading.png) center no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto 20px;
    -webkit-animation: iconfont 1.8s linear infinite;
    animation: iconfont 1.8s linear infinite;
}

@keyframes iconfont {
    from {
        transform: rotate(0deg);
        /* 从0度开始旋转 */
    }

    to {
        transform: rotate(360deg);
        /* 旋转到360度 */
    }
}

.icon-expire-pay {
    position: absolute;
    left: 47px;
    bottom: 107px;
    border-radius: 12px;
    width: 158px;
    height: 158px;
    text-align: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

.icon-expire-pay i {
    background: url(https://static.3d66.com/act/html/act-20200725/img/refresh.png) center no-repeat;
    width: 30px;
    height: 30px;
    background-size: cover;
    cursor: pointer;
    margin: 20px auto 15px;
    display: block;
    animation: iconfont 1.8s linear infinite;
}

.icon-expire-pay span {
    color: #fff;
    font-size: 12px;
    line-height: 18px;
}
</style>
